<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        /* el-divider 修改高度&虚线效果 */
        .el-divider--horizontal{
            background: 0 0;
            border-top: 1px dashed #e8eaec;
            margin-bottom: 10px;
            margin-top: 10px;
        }
        .third{
            margin-top: 10px;
        }
        *{
            font-size: 14px;
        }
        a{
            text-decoration:none;
            color: black;
        }
    </style>
</head>
<body>
<div id="app1">
    <label>订单编号：</label><span style="color: red;font-size: 20px">{{orderDetails.id}}</span>
    <el-divider :dashed="true"></el-divider>

    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>收件人信息</span>
        </div>
        <div class="text item">
            <el-row>
                <el-col :span="6"><label>收件人姓名：{{orderDetails.legal}}</label></el-col>
                <el-col :span="6"><label>收件人电话：{{orderDetails.fixedTel}}</label></el-col>
                <el-col :span="6"><label>收件地邮编：{{orderDetails.legal}}</label></el-col>
                <el-col :span="6"><label>收件地址：{{orderDetails.endPlace}}</label></el-col>
            </el-row>
        </div>
    </el-card>
    <el-divider :dashed="true"></el-divider>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>产品信息</span>
        </div>
        <div class="text item">
            <el-row>
                <el-col :span="8">
                    <div style="width: 100%;overflow: hidden">
                        <el-row>
                            <el-col :span="12">
                                    <el-image
                                            style="width: 100%; height: 100%"
                                            :src="'http://121.5.226.17/images/b0ba3c71fbf24fa89279cd36cbedccbb.jpg'"
                                            :fit="'contain'"></el-image>
                            </el-col>
                            <el-col :span="12">
                                    <p><a href="javascript:void(0)">{{orderDetails.premarks}}</a></p>
                                    <p>{{orderDetails.pname}}</p>
                                    <p>规格：{{orderDetails.pvalue}}元/m²</p>
                                    <p>价格：<span style="color: red">￥{{orderDetails.pprice}}</span></p>
                                    <p>状态：
                                        <el-button type="success" v-if="orderDetails.status=='有货'" size="mini" round>有货</el-button>
                                        <el-button type="info" v-else size="mini" round>无货</el-button>
                                    </p>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-card>

    <el-divider :dashed="true"></el-divider>
    <el-card class="box-card">
        <div class="text item">
            <el-row class="third">
                <el-col :span="6"><label>支付方式：{{orderDetails.orderType}}</label></el-col>
                <el-col :span="6"><label>支付状态：{{orderDetails.allStatus}}</label></el-col>
                <el-col :span="6"><label>订单生成日期：{{orderDetails.dealTime}}</label></el-col>
                <el-col :span="6"><label>物流信息：{{orderDetails.shippingDate}}</label></el-col>
            </el-row>
            <el-row class="third">
                <el-col :span="6"><label>发货日期：{{orderDetails.endPlace}}</label></el-col>
            </el-row>
            <el-divider></el-divider>
            <label>总数:<span style="color: red">{{orderDetails.number}}</span></label>
            <label>总价:<span style="color: red">{{orderDetails.money}}</span></label>
        </div>
    </el-card>


    <el-divider :dashed="true"></el-divider>

    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>物流信息</span>
        </div>
        <div class="text item">
            <div class="block">
                <el-timeline>
                    <el-timeline-item timestamp="2018/4/12" placement="top">
                        <el-card>
                            <h4>包裹正在览件</h4>
                            <p>签收：王小虎  2018/4/12 20:46</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>
    </el-card>

    <el-button type="primary" onclick="location.href='/order-list.html'">返回上一页</el-button>
</div>




<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/axios/axios.min.js"></script>
<script>
    let app1 = new Vue({
        el:'#app1',
        data(){
            return{
                orderDetails: {
                    allStatus: '',
                    dealTime: '',
                    endPlace: '',
                    fixedTel: '',
                    id: '',
                    legal:'',
                    logisticsName: '',
                    money: 0,
                    number: 0,
                    orderType: '',
                    pnames: '',
                    pquality: 0,
                    premarks: '',
                    pvalue: '',
                    shippingDate: '',
                    status: ''
                }
            }
        },
        methods:{
            findByOrderID(){
                let orderID = localStorage.getItem('id')
                axios.get("/order/id/"+orderID).then(res=>{
                    if (res.data.data==null){
                        this.$message('暂无该订单数据');
                    }else{
                        this.orderDetails = res.data.data
                        console.log(this.orderDetails);
                    }
                })
            }
        },
        mounted(){
            this.findByOrderID()
        }
    })
</script>
</body>
</html>